<template>
	<view class="container" style="padding-bottom: 120rpx;">
		<u--form ref="queryForm" :model="query" label-width="140rpx">
		  <u-form-item label="台车ID" prop="containerCode">
		    <u--input
		    	placeholder="请输入/扫描"
		    	v-model.trim="query.containerCode"
		    	suffixIcon="scan" 
		    	suffixIconStyle="font-size: 68rpx"
		    	style="flex: 1;"
					:disabled="flag"
					@confirm="checkKurumaDetail"
		    >
		    </u--input>
			</u-form-item>
			<u-form-item label="物料号" prop="materialCode">
		    <u--input
		    	placeholder="请输入/扫描"
		    	v-model.trim="query.materialCode"
		    	suffixIcon="scan" 
		    	suffixIconStyle="font-size: 68rpx"
		    	style="flex: 1;"
		    >
		    </u--input>
			</u-form-item>
			<!-- <u-form-item label="批次号" prop="materialBatch">
		    <u--input
		    	placeholder="请输入/扫描"
		    	v-model.trim="query.materialBatch"
		    	suffixIcon="scan" 
		    	suffixIconStyle="font-size: 68rpx"
		    	style="flex: 1;"
		    >
		    </u--input>
			</u-form-item> -->
			<!-- <u-form-item label="物料名" prop="materialName">
		    <u--input
		    	placeholder="请输入/扫描"
		    	v-model.trim="query.materialName"
		    	suffixIcon="scan" 
		    	suffixIconStyle="font-size: 68rpx"
		    	style="flex: 1;"
		    >
		    </u--input> -->
			</u-form-item>
			<u-form-item label="物料描述" prop="materialType">
		    <u--input
		    	placeholder="请输入"
		    	v-model.trim="query.materialType"
		    	style="flex: 1;"
		    >
		    </u--input>
			</u-form-item>
			<!-- <u-form-item label="数量" prop="materialQty">
		    <u--input
		    	placeholder="请输入"
		    	v-model.number="query.materialQty"
		    	style="flex: 1;"
		    >
		    </u--input>
			</u-form-item> -->
		</u--form>
		<uni-table ref="uTable" border stripe emptyText="暂无数据" style="margin: 10px 0">
			<uni-tr>
				<uni-th width="80">物料号</uni-th>
				<!-- <uni-th width="80">批次号</uni-th> -->
				<!-- <uni-th width="80">物料名</uni-th> -->
				<uni-th width="80">物料描述</uni-th>
				<!-- <uni-th width="80">数量</uni-th> -->
				<uni-th width="80">操作</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in materialList" :key="index">
				<uni-td width="80">{{ item.materialCode }}</uni-td>
				<!-- <uni-td width="80">{{ item.materialBatch }}</uni-td> -->
				<!-- <uni-td width="80">{{ item.materialName }}</uni-td> -->
				<uni-td width="80">{{ item.materialType }}</uni-td>
				<!-- <uni-td width="80">{{ item.materialQty }}</uni-td> -->
				<uni-td width="80">
					<u-button type="error" style="width: 120rpx;" size="medium" @click="delMaterial(item)">删除</u-button>
				</uni-td>
			</uni-tr>
		</uni-table>
		<u-modal
			:show="show"
			title="提示"
			content='该物料与台车不匹配,是否继续绑定?'
			:showCancelButton="true"
			:closeOnClickOverlay="false"
			@cancel="show = false"
			@confirm="confirmSubmit"
		></u-modal>
		<u-toast ref="uToast"></u-toast>
		<view class="commonButton">
			<u-button type="primary" :disabled="!flag" @click="addMaterial">添加</u-button>
			<u-button type="warning" @click="reset">重置</u-button>
			<u-button :disabled="!flag || materialList.length === 0" type="error" @click="allDel">一键解绑</u-button>
		</view>
	</view>
</template>

<script>
	import { checkKurumaDetailAPI, addMaterialAPI, checkMaterialAPI, singleDelAPI, allDelAPI } from '@/api/work/wcsStorage.js'
	import {
		uniCard,
		uniTable,
		uniTr,
		uniTd,
		uniTh
	} from '@dcloudio/uni-ui'
	export default {
		components: {
			uniCard,
			uniTable,
			uniTr,
			uniTd,
			uniTh
		},
		data() {
			return {
				query: {
					containerCode: '',
					materialCode: '',
					// materialBatch: '',
					// materialName: '',
					materialType: '',
					// materialQty: ''
				},
				materialList: [],
				flag: false,
				show: false
			};
		},
		methods: {
			async checkKurumaDetail() {
				const res = await checkKurumaDetailAPI(this.query.containerCode)
				// console.log(res)
				if (res.code === 200) {
					this.materialList = res.data
					this.flag = true
				}
			},
			async confirmSubmit() {
				try{
					const res = await addMaterialAPI(this.query)
					this.$refs.uToast.show({
						type: 'success',
						message: '添加成功'
					})
					// console.log(res)
					this.query.materialCode = ''
					// this.query.materialBatch = ''
					// this.query.materialName = ''
					this.query.materialType = ''
					// this.query.materialQty = ''
					this.checkKurumaDetail()
				} catch(e){
					//TODO handle the exception
					this.$refs.uToast.show({
						type: 'warning',
						message: '添加失败'
					})
				} finally {
					this.show = false
				}
			},
			async delMaterial(item) {
				const res = await singleDelAPI(String(item.id))
				console.log(res)
				if (res.code === 200) {
					this.$refs.uToast.show({
						type: 'success',
						message: res.message
					})
					this.checkKurumaDetail()
				} else {
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.message
					})
				}
			},
			async allDel() {
				const res = await allDelAPI(this.query.containerCode)
				if (res.code === 200) {
					this.$refs.uToast.show({
						type: 'success',
						message: res.message
					})
					this.checkKurumaDetail()
				} else {
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.message
					})
				}
			},
			async addMaterial() {
				const validateData = { ...this.query }
				delete validateData.containerCode
				const keylength = this.countNonEmptyValues(validateData)
				if (keylength !== 2) {
					return this.$refs.uToast.show({
						type: 'warning',
						message: '请补充完整物料信息'
					})
				}
				const submitForm = {
					containerId: this.query.containerCode,
					materialCode: this.query.materialCode
				}
				const result = await checkMaterialAPI(submitForm)
				if (result.code === 200) {
					if (result.data !== true) {
						this.show = true
					} else {
						try{
							const res = await addMaterialAPI(this.query)
							this.$refs.uToast.show({
								type: 'success',
								message: '添加成功'
							})
							// console.log(res)
							this.query.materialCode = ''
							// this.query.materialBatch = ''
							// this.query.materialName = ''
							this.query.materialType = ''
							// this.query.materialQty = ''
							this.checkKurumaDetail()
						} catch(e){
							//TODO handle the exception
							this.$refs.uToast.show({
								type: 'warning',
								message: '添加失败'
							})
						}
					}
				}
			},
			reset() {
				this.query = {
					containerCode: '',
					materialCode: '',
					// materialBatch: '',
					// materialName: '',
					materialType: '',
					// materialQty: ''
				},
				this.materialList = []
				this.flag = false
			},
			countNonEmptyValues(obj) {
			  const values = Object.values(obj)
			  const nonEmptyValues = values.filter(value => value != null && value !== '')
			  return nonEmptyValues.length
			}
		}
	}
</script>

<style lang="scss">
	.commonButton {
		width: 100%;
		display: flex;
		gap: 20rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 15rpx;justify-content: space-between;
		background-color: #fff;
	}
</style>
